import React, { useState } from 'react'
import type { FormInstance } from 'antd';
import { Button, Form, Input, Select, Space } from 'antd';
import { useSelector } from 'react-redux';
import ChinaJson from '../../assets/china.json'
import type { CascaderProps } from "antd";
import './navbar.scss'


type LayoutType = Parameters<typeof Form>[0]["layout"];


function navbar(props: any) {
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState<LayoutType>("horizontal");
  const list = useSelector((state) => {
    return state.list.data
  })
  // 招生办
  const options = [
    {
      value: "招生办",
      label: "招生办",
    },
    {
      value: "豫中市场部",
      label: "豫中市场部",
    },
    {
      value: "辽宁市场部",
      label: "辽宁市场部",
    },
    {
      value: "冀北市场部",
      label: "冀北市场部",
    },
    {
      value: "黑北市场部",
      label: "黑北市场部",
    },
    {
      value: "辽东市场部",
      label: "辽东市场部",
    },
    {
      value: "鲁冀市场部",
      label: "鲁冀市场部",
    },
    {
      value: "山东市场部",
      label: "山东市场部",
    },
    {
      value: "中原市场部",
      label: "中原市场部",
    },
    {
      value: "晋中市场部",
      label: "晋中市场部",
    },
    {
      value: "辽东市场部",
      label: "辽东市场部",
    },
    {
      value: "邯郸市场部",
      label: "邯郸市场部",
    },
  ]

  // 级联城市
  const optionsCity = ChinaJson.map((item: any) => {
    return {
      value: item.code,
      label: item.label,
      children: item.children.map((child: any) => ({
        value: child.code,
        label: child.label,
      })),
    };
  })

  // 学院
  const optionsCollege = [
    {
      value: "游戏学院",
      label: "游戏学院",
    },
    {
      value: "网站工程学院",
      label: "网站工程学院",
    },
    {
      value: "物联网工程",
      label: "物联网工程",
    },
  ]
  const handleChange = (value: string) => {
    // console.log(`selected ${value}`);
  };
  //联机城市
  const onChange: CascaderProps<Option>["onChange"] = (value) => {
    // console.log(value);
  };

  const onFinish = (valus) => {
    // console.log(valus,'111111111');
    
    props.goSearch(valus, '传递')
  }

  const formItemLayout =
    formLayout === "horizontal"
      ? { labelCol: { span: 12 }, wrapperCol: { span: 12 } }
      : null; // 水平表单布局
  return (
    <div className="navBox">
      <Form form={form} {...formItemLayout} layout='inline' initialValues={{ layout: formLayout }} onFinish={onFinish}>
        <Form.Item name="stuName" label="学生姓名">
          <Input placeholder='请输入学生姓名' />
        </Form.Item>
        <Form.Item name="origin" label="市场部">
          <Select
            placeholder="请选择市场部"
            style={{ width: 120 }}
            onChange={handleChange}
            options={options}
          />
        </Form.Item>
        <Form.Item name="collegeName" label="学院名称">
          <Select
            placeholder="请选择学院名称"
            style={{ width: 120 }}
            options={optionsCollege}
          />
        </Form.Item>
        <Form.Item name="workCity" label="工作城市" style={{ marginLeft: 50 }} >
          <Select
            placeholder="选择城市"
            style={{ width: 200 }}
            options={optionsCity}
            onChange={onChange}
          />
        </Form.Item>
        <Form.Item style={{ marginLeft: 100 }}>
          <Button htmlType='submit' type="primary">查询</Button>
        </Form.Item>
      </Form>
    </div>
  )
}


export default navbar
